<template>
	<div class="row" width="100%">
		<h1>{{selectClassDate}}分班</h1>
		<el-select v-model="selectClassDate">
			<el-option v-for="item in classDateList" :key="item.value" :value="item.value" :label="item.label">

			</el-option>
		</el-select>
		<el-card>
			<br/>
			<h3>未分班学生 {{ draggingInfo }}</h3>
			<table style="width: 100%">
				<tr>
					<draggable
						:list="list"
						:disabled="!enabled"
						class="list-group"
						ghost-class="ghost"
						:group="{ name: 'people', put: true }"
						:move="checkMove"
						@start="dragging = true"
						@end="dragging = false"
					>
						<template #item="{ element }">
							<td>{{ element.name }}</td>
						</template>
						<!-- <template #footer>
							<button @click="addPeople">Add</button>
						</template> -->
					</draggable>
				</tr>
			</table>
			<br />
			<div class="classGroupDiv">
				<table border="1" style="width: 100%" class="table-style">
					<tr v-if="loading">
						<td colspan="14">
							<el-skeleton  :loading="loading" :rows="10" />
						</td>
					</tr>
					<tr>
						<th style="height: 20px">操作</th>
						<th>班级名称</th>
						<th>上课教师</th>
						<th>教室名称</th>
						<th>班级名称</th>
						<th>上课开始时间</th>
						<th>上课结束时间</th>
						<th>班级等级</th>
						<th>上课星期</th>
						<th colspan="6">班级学生</th>
					</tr>
					
					<tr v-for="(value,index) in classgroupList" :key="value.id">
						<!-- {{value}} -->
						<!-- <td style="width: 110px;height:20px">
					<el-select size='mini' disabled="disabled" v-model="value.class_date" placeholder="请选择">
						<el-option :label="value.class_date" :value="value.class_date"> </el-option>
					</el-select>
				</td> -->
						<td style="width: 90px; height: 20px">
							<el-space :size="10" spacer="|">

							<el-link size='mini' type='success' @click="addClassgroup(index)">复制</el-link>
							<el-link size='mini' type='info' @click="removeClassgroup(index)">删除</el-link>
							</el-space>
						</td>
						<td style="width: 120px; height: 20px">
							<el-input size="mini" v-model="value.class_name"></el-input>
						</td>
						<td style="width: 90px; height: 20px">
							<el-select
								size="mini"
								v-model="value.class_teacher"
								placeholder="请选择"
							>
								<el-option
									v-for="item in teacherList"
									:label="item.name"
									:key="item.id"
									:value="item.id"
								>
								</el-option>
							</el-select>
						</td>
						<td style="width: 90px; height: 20px">
							<el-select
								size="mini"
								v-model="value.class_class_classroom"
								placeholder="请选择"
							>
								<el-option
									v-for="item in classroomList"
									:label="item.name"
									:key="item.id"
									:value="item.id"
								>
								</el-option>
							</el-select>
						</td>
						<td style="width: 90px; height: 20px">
							<el-select
								size="mini"
								v-model="value.class_number"
								placeholder="请选择"
							>
								<el-option
									v-for="item in classNumberList"
									:label="item.label"
									:key="item.value"
									:value="item.value"
								>
								</el-option>
							</el-select>
						</td>
						<td style="width: 100px; height: 20px">
							<el-time-select
								size="mini"
								v-model="value.class_start_time"
								start="08:30"
								step="00:15"
								end="18:30"
								placeholder="Select time"
							>
							</el-time-select>
						</td>
						<td style="width: 100px; height: 20px">
							<el-time-select
								size="mini"
								v-model="value.class_end_time"
								start="08:30"
								step="00:15"
								end="18:30"
								placeholder="Select time"
							>
							</el-time-select>
						</td>
						<td style="width: 80px; height: 20px">
							<el-select size="mini" v-model="value.class_level" placeholder="请选择">
								<el-option
									v-for="item in classLevelList"
									:label="item.label"
									:value="item.value"
									:key="item.value"
								>
								</el-option>
							</el-select>
						</td>
						<td style="width: 90px; height: 20px">
							<el-select size="mini" v-model="value.class_week" placeholder="请选择">
								<el-option v-for="item in classWeekList" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</td>
						<draggable
							:list="value.students"
							:group="{ name: 'people', put: true }"
							:disabled="!enabled"
							item-key="name"
							:move="checkMove($event,index)"
							ghost-class="ghost"
							@start="onStart($event,index)"
							@end="onEnd"
						>
							<template #item="{ element }">
								<td class="studentDiv">{{ element.name }}</td>
							</template>
						</draggable>
						<!-- <td  style="width: 50px"><el-button type="danger" size="mini" style="width: 50px;"><i class="el-icon-delete"></i></el-button></td> -->
					</tr>
				</table>
			</div>
			
			<el-button type='success'>保存</el-button>
		</el-card>
	</div>
</template>

<script>
import draggable from "vuedraggable";
import { defineComponent, inject, reactive, ref, onMounted, computed,toRaw } from "vue";
import { useRefs } from "/@/core";
import { ElMessage, ElMessageBox } from "element-plus";
let id = 1;
export default defineComponent({
	name: "simple",
	display: "Simple",
	order: 0,
	components: {
		draggable
	},
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject("service");

		const enabled = ref(true);
		const list = ref([]);

		const dragging = ref(false);

		const teacherList = ref([]);
		const getTeacherList =async ()=>{
			const res = await service.teacherService.list()
			if (res){
				teacherList.value = res
			}
		}
		const classroomList = ref([]);
		const getClassroom = async ()=>{
			const res = await service.classroomService.list()
			if (res){
				classroomList.value = res
			}
		}

		// 获取未分班学生
		const getLeaveStudent = async () => {
			const res = await service.studentService.leaveStudent();
			if (res) {
				list.value = res;
			}
		};

		// 获取当前年份
		const getNowYear = function () {
			let date = new Date();
			date.getFullYear(); //获取完整的年份(4位)
			let season = "";
			if (date.getMonth() + 1 >=2  && date.getMonth() + 1 <= 7) {
				season = "春季";
			}else if ((date.getMonth() + 1 >=9  && date.getMonth() + 1 <= 12) || date.getMonth() + 1 === 1) {
				season = "秋季";
			}
			return date.getFullYear() + "年" + season;
		};

		const classgroupList = ref([]);
		// 获取本年度分班情况
		const getClassgroup = async () => {
			const res = await service.classgroupService.classgroupViewList({
				class_date: getNowYear()
			});
			res.forEach((item) => {
				let studentList = [];
				const arryStudents = item.classgroup_students.split("-");
				for (let item of arryStudents) {
					studentList.push({
						id: item.split("&")[0],
						name: item.split("&")[1]
					});
				}
				item.students = studentList;
				item.class_class_classroom = parseInt(item.class_class_classroom)
			});
			console.log(res, "----rese---");
			if (res) {
				classgroupList.value = res;
			}
			loading.value = false;
		};

		const classNumberList = ref([]);
		// 获取班级号
		const getClassNumber = async function () {
			const res = await service.base.system.param.list({ keyName: "class_number" });
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item) => {
				classNumberList.value.push({
					value: "" + item.value,
					label: item.label
					// type: "success"
				});
			});
		};

		// 定义班级等级
		const classLevelList = ref([]);

		// 获取班级等级
		const getClassLevel = async function () {
			const res = await service.base.system.param.list({ keyName: "class_level" });
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item) => {
				classLevelList.value.push({
					value: "" + item.value,
					label: item.label,
					type: "warning"
				});
			});
		};
		// 定义班级日期
		const classDateList = ref([]);
		const selectClassDate = ref(getNowYear());

		// 获取班级等级
		const getClassDate = async function () {
			const res = await service.base.system.param.list({ keyName: "class_date" });
			// 将json字符串转换为json对象
			let classLevel = eval("(" + res[0].data + ")");
			classLevel.forEach((item) => {
				classDateList.value.push({
					value: "" + item.value,
					label: item.label,
					type: "warning"
				});
			});
		};
		// 定义星期列表
		const classWeekList = ref([
			{
				label: "星期一",
				value: "星期一"
			},
			{
				label: "星期二",
				value: "星期二"
			},
			{
				label: "星期三",
				value: "星期三"
			},
			{
				label: "星期四",
				value: "星期四"
			},
			{
				label: "星期五",
				value: "星期五"
			},
			{
				label: "星期六",
				value: "星期六"
			},
			{
				label: "星期天",
				value: "星期天"
			}
		]);

		const addClassgroup = (classgroupId) =>{
			let classgroupInfo = {
				class_name:toRaw(classgroupList.value[classgroupId]).class_name,
				class_number:toRaw(classgroupList.value[classgroupId]).class_number,
				students:[list.value.pop()],
				class_teacher:toRaw(classgroupList.value[classgroupId]).class_teacher,
				class_week:toRaw(classgroupList.value[classgroupId]).class_week,
				class_start_time:toRaw(classgroupList.value[classgroupId]).class_start_time,
				class_end_time:toRaw(classgroupList.value[classgroupId]).class_end_time,
				class_level:toRaw(classgroupList.value[classgroupId]).class_level,
				class_class_classroom:toRaw(classgroupList.value[classgroupId]).class_class_classroom,
				}
			classgroupList.value.splice(classgroupId+1,0,classgroupInfo)
			console.log(classgroupList.value);
		}
		const removeClassgroup = (classgroupId) =>{
			// classgroupInfo.students = []
			list.value = [...(classgroupList.value[classgroupId].students), ...list.value]
			classgroupList.value.splice(classgroupId,1)
			// alert(classgroupId)
		}

		const loading = ref(true)

		onMounted(() => {
			getLeaveStudent();
			getClassgroup();
			getClassNumber();
			getClassLevel();
			getClassDate();
			getTeacherList()
			getClassroom()
		});
		const draggingInfo = computed(() => {
			return dragging.value ? "under drag" : "";
		});

		const onStart = (e,index)=>{
			console.log(e,'e_______');
			console.log(index,'value_______');
			console.log(classgroupList.value[index].students.length);
			if (index){
				if (classgroupList.value[index].students.length <=1){
					ElMessage('最后一个了')
					return false;
				}
			}
			dragging.value =true
		}
		const onEnd = ()=>{
			dragging.value =false
			console.log(classgroupList.value);
		}
		const checkMove = function(e,index) {
			
      // window.console.log("Future index: " + e.draggedContext.futureIndex);
    }

		return {
			enabled,
			onStart,
			onEnd,
			checkMove,
			list,
			draggingInfo,
			dragging,
			classgroupList,
			classNumberList,
			classLevelList,
			classWeekList,
			classDateList,
			selectClassDate,
			teacherList,
			classroomList,
			getNowYear,
			addClassgroup,
			removeClassgroup,
			loading
		};
	}
});
</script>

<style scoped>
/*定义要拖拽元素的样式*/
.ghostClass {
	background-color: blue !important;
}
.chosenClass {
	background-color: red !important;
	opacity: 1 !important;
}
.dragClass {
	background-color: blueviolet !important;
	opacity: 1 !important;
	box-shadow: none !important;
	outline: none !important;
	background-image: none !important;
}
.itxst {
	/*margin: 10px;*/
}
.title {
	padding: 6px 12px;
}
/*.col{*/
/*  width: 100%;*/
/*  flex: 1;*/
/*  !*padding: 10px;*!*/
/*  border: solid 1px #eee;*/
/*  border-radius:5px ;*/
/*  float: left;*/
/*}*/

.col1 {
	width: 75%;
	flex: 1;
	padding: 10px;
	border: solid 1px #eee;
	border-radius: 5px;
	float: left;
}

.item {
	padding: 6px 12px;
	margin: 0px 10px 0px 10px;
	border: solid 1px #eee;
	background-color: #f1f1f1;
}
.item:hover {
	background-color: #fdfdfd;
	cursor: move;
}
.item + .item {
	border-top: none;
	margin-top: 6px;
}
.classGroupDiv {
	overflow-y: scroll;
	height: 400px;
}
.classGroupDiv table td {
	padding: 5px;
	margin: auto;
	line-height: 30px;
	font-size: 12px;
	text-align: center;
	height: 30px;
	display: table-cell;
	width:60px;
}
/* .classGroupDiv table td .studentDiv {
	width: 100px !important;
} */
.table-style {
	width: 100%;
	height: 400px;
	border: 0;
}
table {
	border: 0;
	width: 100%;
	border-left: #c8b9ae solid 1px;
	border-top: #c8b9ae solid 1px;
	border-collapse: collapse;
}
table tr {
	border: 0;
}
table td {
	/*width:25%;*/
	border-right: #c8b9ae solid 1px;
	border-bottom: #c8b9ae solid 1px;
	padding: 10px 10px 6px;
}
</style>
